import React, { Component, Fragment } from 'react';
import { connect } from 'dva'
import BaseTable from './baseTable'
import { Space, Popconfirm, Radio, Input, Modal, Button, Popover } from 'antd'
import constant from '../../constant/constant'

class MechanismTable extends BaseTable {
    constructor(props) {
        super(props),
            this.state = {
                column: [
                    { title: "机构名称", dataIndex: "mechanismName", key: "mechanismName",...this.getColumnSearchProps("mechanismName") },
                    { title: "机构类型", dataIndex: "mechanismType", key: "mechanismType",
                    filters: [
                        { text: "验证机构", value: "验证机构" },
                        { text: "测试机构", value: "测试机构" },
                    ],
                    onFilter: (value, record) => record.mechanismType.indexOf(value) === 0 },
                    { title: "联系方式", dataIndex: "phone", key: "phone" },
                    { title: "邮箱", dataIndex: "email", key: "email" },
                    { title: "地址", dataIndex: "address", key: "address" },
                    {
                        title: "认证材料", dataIndex: "certificationMaterials", key: "certificationMaterials",
                        render: (text, record, index) => {
                            return (
                                <a href={constant.serverUrl + constant.fileUrl.mechanismUrl + record.certificationMaterials}>{record.certificationMaterials}</a>
                            )
                        }
                    },
                    {
                        title: "审核状态", dataIndex: "examinationStatus", key: "examinationStatus",
                        render: (text, record, index) => {
                            return (
                                <Space>
                                    {this.renderExaminationButton(record.examinationStatus, record.id)}
                                    {this.renderExaminationContent(record.MechanismExamination.reason,record.examinationStatus)}
                                </Space>
                            )
                        }
                    },
                ],
                mechanismExaminationModalVisible: false,
                mechanismExamination: {
                    mechanismId: "",
                    userId: this.props.user.id,
                    examinationStatus: -1,
                    reason: ""
                }
            }
    }

    componentDidMount() {
        this.props.dispatch({
            type: "examination/getMechanismList"
        })
    }

    renderExaminationContent(reason,status){
        if(reason == ""){
            return <a>{status}</a>
        }
        else{
            return <Popover content={reason}><a>{status}</a></Popover>
        }
    }

    setMechanismExaminationModalVisible = isShow => {
        this.setState({
            mechanismExaminationModalVisible: isShow
        })
    }

    showMechanismExaminationModalVisible = id => {
        this.setState({
            mechanismExaminationModalVisible: true
        })

        let _mechanismExamination = JSON.parse(JSON.stringify(this.state.mechanismExamination));
        _mechanismExamination.mechanismId = id
        this.setState({
            mechanismExamination: _mechanismExamination
        })
    }

    setReason = e => {
        let _mechanismExamination = JSON.parse(JSON.stringify(this.state.mechanismExamination));
        _mechanismExamination.reason = e.target.value
        _mechanismExamination.examinationStatus = 0
        this.setState({
            mechanismExamination: _mechanismExamination
        })
    }

    setExaminationStatus = e => {
        let _mechanismExamination = JSON.parse(JSON.stringify(this.state.mechanismExamination));
        _mechanismExamination.examinationStatus = e.target.value
        this.setState({
            mechanismExamination: _mechanismExamination
        })
    }

    renderReasonInput = examinationStatus => {
        if (examinationStatus == 0) {
            return (
                <Space><p>不通过原因：<Input style={{ width: 300, marginTop: 15 }} onChange={this.setReason}></Input></p></Space>
            )
        }
    }

    renderExaminationButton = (examination, id) => {
        if (examination == "待审核") {
            return (
                <a onClick={() => { this.showMechanismExaminationModalVisible(id) }}>审核</a>
            )
        }
    }

    handleMechanismExamination = () => {
        this.props.dispatch({
            type: "examination/updateMechanismExamination",
            data: this.state.mechanismExamination
        })

        setTimeout(() => {
            this.props.dispatch({
                type: "examination/getMechanismList"
            })
        }, 500);


        this.setState({
            mechanismExaminationModalVisible: false
        })
    }

    render() {
        return (
            <Fragment>
                <Modal
                    title="机构审核"
                    visible={this.state.mechanismExaminationModalVisible}
                    onOk={() => { this.setMechanismExaminationModalVisible(false) }}
                    onCancel={() => { this.setMechanismExaminationModalVisible(false) }}
                    footer={null}
                >
                    <Space>
                        <Radio.Group onChange={this.setExaminationStatus}>
                            <Radio value={2}>通过</Radio>
                            <Radio value={0}>不通过</Radio>
                        </Radio.Group>
                        <Button type='primary' onClick={this.handleMechanismExamination}>提交</Button>
                    </Space>
                    {this.renderReasonInput(this.state.mechanismExamination.examinationStatus)}

                </Modal>
                {super.render(this.state.column, this.props.dataSource, {pageSize:12})}
            </Fragment>
        )
    }
}

const mapStateToProps = state => {
    let dataSource = state.examination.mechanismList
    let user = state.app.user
    return {
        dataSource,
        user
    }
}

export default connect(mapStateToProps)(MechanismTable)